<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作发布文章界面</title>
    <link rel="stylesheet" href="css/element.css">
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/element.js"></script>
    <script src="js/echarts.min.js"></script>
    <style>
        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 100%;
        }

        /* 修改：卡片底部边框样式 */
        .card-bottom-border {
            border-bottom: 1px solid #EBEEF5;
            margin: 0 -20px; /* 负边距抵消卡片内边距，使边框延伸到卡片边缘 */
            padding: 0 20px; /* 重新添加内边距，保持内容位置不变 */
            margin-bottom: 15px;
        }

        /* 新增：加粗的底部边框 */
        .card-bottom-border-thick {
            border-bottom: 2px solid #EBEEF5; /* 加粗边框 */
            margin: 0 -20px;
            padding: 0 20px;
            margin-bottom: 15px;
        }

        #box{
            margin-left: 15px;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>发布文章</h2>

    <!--    表单部分-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="标题">
            <el-input v-model="formInline.user" placeholder="按名字标题查找"></el-input>
        </el-form-item>


        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="onSubmit">发布文章</el-button>
        </el-form-item>
    </el-form>

    <!--    卡片部分-->
    <el-card class="box-card">
        <div v-for="o in 4" :key="o" class="text item">
            <div class="clearfix">
                <el-link style="float: left;" type="primary">如何做一名合格的Java工程师？</el-link>
            </div>

            <br>

            <div class="text item">
                <div><b>作者：</b>研发部</div>
                <br>
                <div><b>时间：</b>2025-1-1 15:40</div>
                <br>
                <div>
                    做一名Java工程师需要付出非常大的努力,
                    做一名Java工程师需要付出非常大的努力,
                    做一名Java工程师需要付出非常大的努力,
                    做一名Java工程师需要付出非常大的努力,
                </div>
            </div>

            <!-- 使用修改后的边框类 -->
            <div class="card-bottom-border"></div>
            <br>
            <div class="card-bottom-border-thick"></div>
        </div>
    </el-card>
</div>

<script>
    new Vue({
        el: "#box",
        data: {
            formInline: {
                user: '',
                region: ''
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
                document.location.href = "article_add.html";
                document.location.target = "content";

            }
        }
    })
</script>
</body>